<!-- 页面生成器 -->
<template>
    <div class="dc-page-builder" :style="pageTemplate.data.componentProps.style">

        <template v-for="item in pageTemplate.data.children">
            <nodeItem :item="item"></nodeItem>
        </template>
    </div>
</template>

<script setup>
import nodeItem from './nodeItem.vue';
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, defineExpose } from 'vue'
import { initBuilder, pageData, getCustomMethod, generateData } from '../pageManager.js'
import { manager } from '../manager.js'

defineOptions({ name: 'dcPageBuilder' })

const emit = defineEmits(['ready'])

const props = defineProps({
    pageTemplate: {
        type: Array,
    },
    data: {
        type: Object,
        default: {}
    }
})

// console.log("页面数据：", props.data)

initBuilder(props.pageTemplate, props.data);

// 挂载DOM前触发
onBeforeMount(() => {
    getCustomMethod(generateData.data, 'onBeforeMount');
})

// 挂载DOM后触发
onMounted(() => {
    emit("ready", manager.builder);
    getCustomMethod(generateData.data, 'onMounted');
})

// 更新组件前触发
onBeforeUpdate(() => {
    getCustomMethod(generateData.data, 'onBeforeUpdate');
});

// 更新组件后触发
onUpdated(() => {
    getCustomMethod(generateData.data, 'onUpdated');
});

// 组件卸载前触发
onBeforeUnmount(() => {
    getCustomMethod(generateData.data, 'onBeforeUnmount');
});

// 组件卸载后触发
onUnmounted(() => {
    getCustomMethod(generateData.data, 'onUnmounted');
});
</script>

<style scoped>
.dc-page-builder {
    position: relative;
}
</style>